<template>
  <div class="collect">
    <van-nav-bar title="我的收藏" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="topMenu flex_between">
      <span>我收藏的宝贝</span>
      <span>选择</span>
    </div>

    <div class="contentNav">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
        :immediate-check="false"
        :offset='50'>
          <div class="shopList flex_between flex-wrap" >
              <div class="shop" v-for='(item,index) in order' :key='index' @click='jump(item)'>
                <img :src='item.images' class="shopPic"/>
                <div class="ml-20 mr-20" style="width:2.9rem;">
                  <div class="name">
                    <p class="hide_other l ">{{item.title}}</p>
                    <div class="publicTags l">{{item.quality}}</div>
                    <div class="clear"></div>
                  </div>
                  <div class="other mb-20">
                    <p>￥{{item.price}}</p>
                    <!-- <p>16人想要</p> -->
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
            </div>
        </van-list>
    </div>
  </div>
</template>

<script>
import storage from '@/common/store'
export default {
  data(){
    return{
      order:[],
      loading: false,
      finished: false,
      page:1,
      isLoading:false,
      size:10,
      userId:storage.getItem('userInfo').userId,
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.collectionsCommodities,{size:this.size,page:1,userId:this.userId}).then(data=>{
        data.data.curPageData.forEach((item,index)=>{
          data.data.curPageData[index].images=JSON.parse(item.images)[0];
        });
        this.order=data.data.curPageData;
        this.page=2;
      })
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.collectionsCommodities,{size:this.size,page:this.page,userId:this.userId}).then(data=>{
          console.log((Number(this.page)-1)*this.size,data.data.totalNum)
          if((Number(this.page)-1)*this.size<data.data.totalNum){
            data.data.curPageData.forEach((item,index)=>{
              data.data.curPageData[index].images=JSON.parse(item.images)[0];
            });
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
            console.log(this.finished)
          }
          this.page++;
        })
      }, 500);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.collect{
  background-color: #f0f1f4;
  height: 100vh;
}
.topMenu {
  font: 0.3rem/0.4rem "微软雅黑";
  color: #999;
  padding: 0.3rem;
  background-color: #fff;
}
.topMenu span:nth-of-type(2) {
  font-size: 0.24rem;
}

.shopList {
  background-color: #f0f1f4;
  padding: 0.3rem;
}
.shopList .shop {
  background-color: #fff;
  padding-bottom: 0.2rem;
  border-radius: 0.12rem;
  margin-bottom: 0.3rem;
}
.shopList .shop .shopPic {
  width: 3.3rem;
  height: 3.3rem;
  display: block;
}
.shopList .shop .name {
  font: 0.26rem/0.3rem "微软雅黑";
  color: #000;
  margin: 0.23rem 0;
}
.shopList .shop .name p {
  display: inline-block;
  max-width: 60%;
}
.shopList .shop .other p:nth-of-type(1) {
  float: left;
  display: block;
  font: 0.34rem/0.5rem "微软雅黑";
  color: #f88222;
}
.shopList .shop .other p:nth-of-type(2) {
  float: right;
  display: block;
  font: 0.2rem/0.5rem "微软雅黑";
  color: #999999;
}
.peopleMessage {
  border-top: 1px solid rgba(153, 153, 153, 0.2);
  padding: 0.22rem 0;
}
.peopleMessage .mPic {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  display: block;
}
.peopleMessage > div {
  float: left;
  margin-left: 0.3rem;
}
.peopleMessage > div h3 {
  font: 0.24rem/0.35rem "微软雅黑";
  color: #4aace9;
  width: 1.9rem;
}
.peopleMessage > div p {
  font: 0.2rem/0.35rem "微软雅黑";
  color: #999999;
}
.peopleMessage > div p img {
  display: inline-block;
  width: 0.24rem;
  height: 0.24rem;
}

.contentNav{height: calc(100vh - 46px - 1rem);overflow-y: scroll;}
</style>
